<template>
  <div>
    <div class="header">
      <span class="search-header">搜索用户数</span>
      <svg
        t="1652755835837"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1957"
        width="16"
        height="16"
      >
        <path
          d="M512 0C229.23 0 0 229.23 0 512s229.23 512 512 512 512-229.23 512-512S794.77 0 512 0zM512 928c-229.75 0-416-186.25-416-416S282.25 96 512 96s416 186.25 416 416S741.75 928 512 928z"
          p-id="1958"
          fill="#cdcdcd"
        />
        <path
          d="M537.64 343.452c47.074 0 83.266-37.528 83.266-78.072 0-32.46-20.832-60.878-62.496-60.878-54.816 0-82.178 44.618-82.178 77.11C475.144 320.132 498.152 343.452 537.64 343.452z"
          p-id="1959"
          fill="#cdcdcd"
        />
        <path
          d="M533.162 728.934c-7.648 0-10.914-10.136-3.264-39.55l43.25-166.406c16.386-60.848 10.944-100.398-21.92-100.398-39.456 0-131.458 39.83-211.458 107.798l16.416 27.392c25.246-17.256 67.906-34.762 77.792-34.762 7.648 0 6.56 10.168 0 35.508l-37.746 158.292c-23.008 89.266 1.088 109.538 33.984 109.538 32.864 0 117.808-30.47 195.57-109.632l-18.656-25.34C575.354 716.714 543.05 728.934 533.162 728.934z"
          p-id="1960"
          fill="#cdcdcd"
        />
      </svg>
    </div>
    <div class="main">
      <span class="main-title">12321</span>
      <span class="main-contend">17.2</span>
      <svg
        t="1652756379047"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3245"
        width="26"
        height="26"
      >
        <path
          d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z"
          fill="#1afa29"
          p-id="3246"
        />
      </svg>
      <svg
        t="1652756754412"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4327"
        width="26"
        height="26"
      >
        <path
          d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z"
          fill="#d81e06"
          p-id="4328"
        />
      </svg>
    </div>
    <div class="footer">
      <!-- 容器 -->
      <div class="charts" ref="charts"></div>
    </div>
  </div>
</template>

<script>
// 引入echarts
import echarts from 'echarts'
export default {
  name: 'LineCharts',
  mounted () {
    // 初始化echarts实例
    let LineCharts = echarts.init(this.$refs.charts)
    // 配置数据
    LineCharts.setOption({
      xAxis: {
        // 隐藏x轴
        show: true,
        type: 'category',
      },
      yAxis: {
        // 隐藏y轴
        show: false,
      },
      // 系列
      series: [
        {
          type: 'line',
          data: [12,94, 7, 68, 12, 75],
          // 拐点的样式
          itemStyle: {
            opacity: 0,
          },
          // 线条的样式
          lineStyle: {
            color: 'cyan'
          },

        }
      ],
      // 布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      }

    })
  }
}
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
}
.search-header {
  margin-right: 7px;
}
.main {
  margin: 10px 0;
}
.main-title {
  margin-right: 30px;
}
.main-contend {
  margin-right: 10px;
}
.charts {
  width: 100%;
  height: 50px;
}
</style>